<template>
  <div>
    <!-- 面包屑导航 -->
    <breadcrumb></breadcrumb>
    <div class="control">
      <!-- 司机姓名 -->
      <div class="inputItem">
        <div class="title">司机姓名</div>
        <div class="inputBox">
          <el-input v-model="driverName" @keyup.enter.native="getDriverList(1)">
          </el-input>
        </div>
      </div>
      <!-- 手机号 -->
      <div class="inputItem">
        <div class="title">手机号</div>
        <div class="inputBox">
          <el-input v-model="phone" @keyup.enter.native="getDriverList(1)">
          </el-input>
        </div>
      </div>
      <div class="inputItem">
        <div class="title">接单城市</div>
        <div class="inputBox">
          <el-input v-model="region" @keyup.enter.native="getDriverList(1)">
          </el-input>
        </div>
      </div>
      <div class="inputItem">
        <div class="title">车队名称</div>
        <el-select ref="projectNameRef1" clearable v-model="projectName" size="small" filterable placeholder="请选择"
          @change="changeProjectName($event)">
          <el-option v-for="item in projectNameOptions" :key="item.fleetId" :label="item.fleetName" :value="item.fleetId">
          </el-option>
        </el-select>
      </div>

      <!-- <div class="inputItem">
        <div class="title">所属地区</div>
        <div class="inputBox">
          <el-cascader ref="sysCascader" v-model="citySelected" :options="newCity" @change="handleChange($event)"
            placeholder="不限" clearable :filterable="true">
          </el-cascader>
        </div>
      </div> -->

      <!-- <div class="inputItem">
        <div class="title">绑定车辆</div>
        <div class="inputBox">
          <el-input v-model="bingVehicle" @keyup.enter.native="getDriverList">
          </el-input>
        </div>
      </div>
      <div class="inputItem">
        <div class="title">认证状态</div>
        <div class="inputBox">
          <el-select v-model="certStatus" placeholder="请选择">
            <el-option label="待审核" value="0"> </el-option>
            <el-option label="审核中" value="1"> </el-option>
            <el-option label="审核通过" value="2"> </el-option>
            <el-option label="审核未通过" value="3"> </el-option>
          </el-select>
        </div>
      </div> -->
      <div style="margin-bottom: 10px;">
        <!-- 查询 -->
        <el-button type="primary" size="small" icon="el-icon-search" @click="getDriverList(1)">查询</el-button>
        <el-button type="plain" size="small" icon="el-icon-refresh-right" @click="clearUp">清空</el-button>
      </div>
      <el-button style="margin-bottom: 10px;margin-left:10px" type="primary" size="small" icon="el-icon-plus" @click="addDriver">邀请司机</el-button>
    </div>
    <div class="main">
      <div class="list" ref="getHeight">
        <el-table :data="records" style="width: 100%">
          <el-table-column align="center" prop="SerialNumber" label="序号">
            <template slot-scope="scope">
              {{ scope.$index + 1 + Number(size) * (pageCurrent - 1) }}
            </template>
          </el-table-column>
          <el-table-column label="司机照片">
            <template slot-scope="scope">
              <div style="display: flex;justify-content: center;">
                <el-image style="width: 65px; height: 48px;" :src="scope.row.driverPhoto"
                  :preview-src-list="[scope.row.driverPhoto]">
                </el-image>
              </div>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="driverName" label="司机姓名">
          </el-table-column>
          <el-table-column align="center" prop="phoneNumber" label="司机信息" width="220">
            <template slot-scope="scope">
              <div>
                <div style="text-align: left;">
                  <div>司机ID：{{ scope.row.driverId }}</div>
                  <div>手机号：{{ scope.row.phoneNumber }}</div>
                  <div>归属车队：{{ scope.row.fleetName }}</div>
                  <div>接单城市:{{ scope.row.region }}</div>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column align="center" label="车辆信息" width="220">
            <template slot-scope="scope" v-if="scope.row.numberplate">
              <div style="text-align:left;">
                <div>车牌号码：{{ scope.row.numberplate }}</div>
                <div>车辆品牌:{{ scope.row.brandModel }}</div>
                <div>车辆名称：{{ scope.row.vehicleType }}</div>
              </div>
            </template>
            <template v-else>
              <div>'--.--'</div>
            </template>
          </el-table-column>
          <el-table-column align="center" label="昨日在线时长" width="110">
            <template slot-scope="scope">
              <div>{{ scope.row.todayTimes }}</div>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="yesterdayBill" label="昨日司机流水" width="110">
            <template slot-scope="scope">
              <div v-if="scope.row.yesterdayBill">{{ scope.row.yesterdayBill }}</div>
              <div v-else>无</div>
            </template>
          </el-table-column>
          <el-table-column align="center" label="司机四要素">
            <template slot-scope="scope">
              <div style="text-align:left;">
                <div>行为分：{{ scope.row.behaviorScore }}</div>
                <div>准点率：{{ scope.row.punctualityRate }}</div>
                <div>被收藏数：{{ scope.row.collectNumber }}</div>
                <div>被拉黑数：{{ scope.row.blacklistNumber }}</div>
              </div>
            </template>
          </el-table-column>
          <el-table-column align="center" label="状态">
            <template slot-scope="scope">
              <div v-if="scope.row.nowStatus == 1" style="color: #9b9797;">
                离线
              </div>
              <div v-else style="color: #42ec67;">
                正常
              </div>
            </template>
          </el-table-column>
          <!-- <el-table-column align="center" prop="region" label="所属地区">
          </el-table-column>
          <el-table-column align="center" prop="numberplate" label="绑定车辆">
          </el-table-column>
          <el-table-column align="center" prop="vehicleType" label="车辆类别">
          </el-table-column>

          <el-table-column align="center" label="认证状态">
            <template slot-scope="scope">
              <div class="stateBtns">
                <el-button class="Pass" size="small">
                  <i class="iconfont icon-dian"></i>
                  {{
                    (scope.row.certStatus && scope.row.certStatus) == 2
                    ? "审核通过"
                    : (scope.row.certStatus && scope.row.certStatus) == 0
                      ? "待审核"
                      : (scope.row.certStatus && scope.row.certStatus) == 1
                        ? "审核中"
                        : "审核未通过"
                  }}
                </el-button>
              </div>
            </template>
          </el-table-column> -->
          <!-- <el-table-column align="center" prop="createTime" label="加入时间"></el-table-column> -->
          <el-table-column align="center" label="操作">
            <template slot-scope="scope">
              <div>
                <!-- @click="$router.push('/certAudit/details/'+id)" -->
                <el-button type="text" size="small" @click="showDetailBox(scope.row.driverId)">详情</el-button>
                <!--                <el-button-->
                <!--                  v-if="scope.row.numberplate"-->
                <!--                  type="text"-->
                <!--                  size="small"-->
                <!--                  @click="showDetailBox(scope.row.driverId)"-->
                <!--                  >标签</el-button-->
                <!--                >-->
                <!--                <el-button-->
                <!--                  v-else-->
                <!--                  type="text"-->
                <!--                  size="small"-->
                <!--                  @click="showBindVehicle(scope.row.driverId)"-->
                <!--                  >绑定车辆</el-button-->
                <!--                >-->
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 分页 -->
      <div class="paginationBox">
        <el-pagination @current-change="changePages($event)" class="pagination" background layout="slot,prev, pager, next"
          :total="data.total * 1" :page-size="data.size * 1" :pager-count="5">
          <template slot>
            <span style="
                color: #686868;
                font-size: 12px;
                margin-right: 20px;
                display: inline-block;
              ">共{{ data.total }}条,每页{{ data.size }}条</span>
          </template>
        </el-pagination>
      </div>
    </div>

    <!-- 详情弹出 -->
    <div>
      <el-dialog custom-class="zdy_dialog_driverListDetail" width="40%" :visible.sync="VisibleDetail">
        <!-- 头部标题 -->
        <div class="dialog_header" slot="title">
          <i class="iconfontcolor icon-dairenzhengsiji"></i>
          <div class="infoBox">
            <div class="info">
              <div class="name">{{ DetailsData.driverName }}</div>
              <div class="tagAudit">已认证</div>
              <div class="gender">
                {{ DetailsData.sex == "0" ? "男" : "女" }}
              </div>
            </div>
            <div class="text">
              <div class="afterLine">司机编号：{{ DetailsData.driverId }}</div>
              <!--              <div class="afterLine">积分：{{ DetailsData.integral }}</div>-->
              <div>最近登录：2023-05-18 15:42:28</div>
            </div>
          </div>
        </div>

        <div class="dialog_body">
          <!-- 司机信息 -->
          <div class="title">
            <i class="iconfontcolor icon-xinxi"></i>
            <h3>司机信息</h3>
            <div class="center_line"></div>
          </div>
          <el-descriptions :colon="true" :column="2" :contentStyle="{ fontSize: '12px', color: '#262626' }"
            :labelStyle="{ fontSize: '12px', color: '#939393' }">
            <el-descriptions-item label="联系电话">{{
              DetailsData.phoneNumber
            }}</el-descriptions-item>
            <el-descriptions-item label="准驾车型">{{
              DetailsData.licenseLevel.message
            }}</el-descriptions-item>
            <el-descriptions-item label="身份证号">{{
              DetailsData.idCard
            }}</el-descriptions-item>
            <el-descriptions-item label="司机年龄">{{
              DetailsData.age
            }}</el-descriptions-item>
            <el-descriptions-item label="接单城市">{{
              DetailsData.region
            }}</el-descriptions-item>
            <el-descriptions-item label="加入车队" v-if="DetailsData.fleetInfoVo != undefined">{{
              DetailsData.fleetInfoVo.fleetName
            }}</el-descriptions-item>
<!--            <el-descriptions-item label="加盟时间" span="2">{{-->
<!--              DetailsData.createTime-->
<!--            }}</el-descriptions-item>-->
            <el-descriptions-item label="图片资料" :span="2">
              <div class="picBox">
                <div class="pic_item">
                  <img class="pic" :src="DetailsData.driverPhoto" alt="" />
                  <span>司机照片</span>
                </div>
                <div class="pic_item">
                  <img class="pic" :src="DetailsData.idCardFront" alt="" />
                  <span>身份证正面照</span>
                </div>
                <div class="pic_item">
                  <img class="pic" :src="DetailsData.idCardBack" alt="" />
                  <span>身份证背面照</span>
                </div>
                <div class="pic_item">
                  <img class="pic" :src="DetailsData.licensePhoto" alt="" />
                  <span>驾驶证照片</span>
                </div>
              </div>
            </el-descriptions-item>
          </el-descriptions>
          <!-- 关联信息 -->
          <div class="title">
            <i class="iconfontcolor icon-xinxi"></i>
            <h3>关联车辆</h3>
            <div class="center_line"></div>
          </div>
          <el-descriptions :colon="true" :column="1" :contentStyle="{ fontSize: '12px', color: '#262626' }"
            :labelStyle="{ fontSize: '12px', color: '#939393' }" v-if="DetailsData.vehicleInfoVos != undefined">
            <el-descriptions-item label="车辆类型">{{
                DetailsData.vehicleInfoVos.vehicleType
            }}</el-descriptions-item>
            <el-descriptions-item label="品牌型号">{{
                DetailsData.vehicleInfoVos.brandModel
            }}</el-descriptions-item>
            <el-descriptions-item label="车辆规格">{{
                DetailsData.vehicleInfoVos.specification
            }}</el-descriptions-item>
            <el-descriptions-item label="车牌号">{{
              DetailsData.vehicleInfoVos.numberplate
            }}
             </el-descriptions-item>
            <el-descriptions-item label="车牌载重">
              <div>
                载方范围:{{DetailsData.vehicleInfoVos.loadSide!=null?DetailsData.vehicleInfoVos.loadSide + '方':"无"}},
                车高:{{ DetailsData.vehicleInfoVos.vehicleHeight!=null?DetailsData.vehicleInfoVos.vehicleHeight + '米':"无" }},
                车厢长度:{{DetailsData.vehicleInfoVos.carriageLength !=null?DetailsData.vehicleInfoVos.carriageLength + '米':"无" }},
                车辆载重:{{ DetailsData.vehicleInfoVos.loadCapacity !=null?DetailsData.vehicleInfoVos.loadCapacity + 'KG':"无"}}
              </div>
            </el-descriptions-item>
            <el-descriptions-item label="图片资料" :span="2">
              <div class="picBox">
                <div class="pic_item">
                  <img class="pic" :src="DetailsData.carFortyFive" alt="" />
                  <span>车辆照片</span>
                </div>
                <div class="pic_item">
                  <img class="pic" :src="DetailsData.licensePhoto" alt="" />
                  <span>行驶证照片</span>
                </div>
                <div class="pic_item">
                  <img class="pic" :src="DetailsData.roadTransport" alt="" />
                  <span>道路运输许可证</span>
                </div>
                <div class="pic_item">
                  <img class="pic" :src="DetailsData.drivingLicenseCar" alt="" />
                  <span>车辆页</span>
                </div>
                <div class="pic_item">
                  <img class="pic" :src="DetailsData.roadTransport" alt="" />
                  <span>道路许可证</span>
                </div>
              </div>
            </el-descriptions-item>
          </el-descriptions>
          <!--认证信息  -->
          <div class="title">
            <i class="iconfontcolor icon-xinxi"></i>
            <h3>认证信息</h3>
            <div class="center_line"></div>
          </div>
          <el-descriptions :colon="true" :column="1" :contentStyle="{ fontSize: '12px', color: '#262626' }"
            :labelStyle="{ fontSize: '12px', color: '#939393' }">
            <el-descriptions-item label="认证信息">{{
              auditTime
            }}</el-descriptions-item>
            <el-descriptions-item label="认证人">{{
              auditUser
            }}</el-descriptions-item>
          </el-descriptions>
        </div>
      </el-dialog>
    </div>
    <!-- 邀请司机弹出框 -->
    <div>
      <el-dialog title="邀请司机" :visible.sync="dialogDriver" width="500px" center>
        <el-form class="driverList" ref="addForm" :model="addForm" :rules="addRules" label-width="72px">
          <el-form-item label="所属车队" prop="RoleValue">
            <div style="width: 200px">
              <el-select class="select" filterable remote reserve-keyword placeholder="请输入关键词" v-model="addForm.Fleet"
                :remote-method="SearchFleetList" :loading="loading">
                <el-option v-for="(item, index) in FleetList" :key="index" :label="item.fleetName" :value="item.fleetId">
                </el-option>
              </el-select>
            </div>
          </el-form-item>
          <el-form-item label="司机手机" prop="RoleValue">
            <div style="width: 200px">
              <el-input v-model="addForm.driverPhone" style="width: 200px"></el-input>
            </div>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="addDriverSubmit()">邀请加入</el-button>
        </span>
      </el-dialog>
    </div>
    <!--  绑定车辆弹出框 -->
    <div>
      <el-dialog title="绑定车辆" :visible.sync="dialogVehicle" width="900px">
        <!-- 车牌号 -->
        <div class="inputItem">
          <div class="title">车牌号</div>
          <div class="inputBox">
            <el-input v-model="vehicle.carNumber" @keyup.enter.native="searchList">
            </el-input>
          </div>
          <el-button type="primary" size="small" icon="el-icon-search" @click="searchList">查询</el-button>
          <el-button type="plain" size="small" icon="el-icon-refresh-right" @click="CleanUp2">清空</el-button>
        </div>
        <el-table :data="records2" @row-click="handleCurrentChange" highlight-current-row style="width: 100%"
          max-height="500">
          <el-table-column align="center" prop="SerialNumber" label="序号">
            <template slot-scope="scope">
              {{ scope.$index + 1 + Number(size) * (pageCurrent - 1) }}
            </template>

          </el-table-column>
          <el-table-column align="center" prop="numberplate" label="车牌号">
          </el-table-column>
          <el-table-column align="center" prop="vehicleType" label="车辆类型">
          </el-table-column>
          <el-table-column align="center" prop="brandModel" label="品牌型号">
          </el-table-column>
          <el-table-column align="center" prop="specification" label="规格">
          </el-table-column>
          <el-table-column align="center" label="选择绑定">
            <template slot-scope="scope">
              <el-radio class="radio" v-model="selectCode" :label="scope.row.vehicleId">
                <span></span>
              </el-radio>
            </template>
          </el-table-column>
        </el-table>

        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVehicle = false">取消</el-button>
          <el-button type="primary" @click="select">确定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import breadcrumb from "@/components/breadcrumb.vue";
import httpApi from "@/http";
import newCity from "@/common/newCity";
import isJSON from "@/common/typeof_JSON";

export default {
  data() {
    return {
      projectNameOptions: [],
      projectName:'',
      loading: false,
      // 选中绑定车辆的司机id
      selectDriverId: "",
      selectCode: "",
      // 认证状态
      certStatus: "",
      driverName: "",
      checkObj: "",
      // 绑定的车牌号
      bingVehicle: "",
      phone: "",
      region: "",
      citySelected: "", //这是城市id的值
      citySelectedLabel: "", //城市字符串
      newCity: [],
      records: [], //司机列表数据
      data: {
        size: "",
        total: "",
      }, //全部数据
      DetailsData: {
        licenseLevel: {
          message: "",
          value: "",
        },
      },
      auditUser: "", //认证人
      auditTime: "", //认证时间
      pageCurrent: 1, //当前页 默认为1
      size: "10",
      VisibleDetail: false,
      dialogDriver: false, // 邀请司机弹出框
      addForm: {
        driverPhone: "",
        Fleet: null,
      },
      addRules: {},
      FleetList: [], // 车队列表
      // 车辆列表参数
      vehicle: {
        carNumber: "", // 车牌号
        pageCurrent: 1, //当前页
        pageSize: "99",
      },
      records2: [], // 车辆列表
      dialogVehicle: false,
    };
  },
  methods: {
    getProjectNameOptions() {
      httpApi.fleetManagementApi.getFleetList({}).then(res => {
        if (res.data.code == 200) {
          this.projectNameOptions = res.data.data.records
        }
      })
    },
    changeProjectName() {
      this.$nextTick(function () {
        this.projectName = this.$refs.projectNameRef1.selected.label
        this.fleetId = this.$refs.projectNameRef1.selected.value
        //console.log(this.projectName, this.fleetId)

      });
    },
    showDetailBox(id) {
      this.VisibleDetail = true;
      let params = { driverId: id };
      ////console.log("传参", params);
      ////console.log("已认证详情id", id);
      httpApi.driverApi.getWaitAuditDriverDetails(params).then((res) => {
        ////console.log(res);
        this.DetailsData = res.data.data;
        ////console.log("详情数据", this.DetailsData);
        this.auditUser =
          this.DetailsData.driverCertAuditVo.auditUser;
        this.auditTime =
          this.DetailsData.driverCertAuditVo.auditTime;
      });
    },
    getDriverList(initCurrent) {
      let params = {
        pageCount: this.size,
        current: initCurrent || this.pageCurrent,
        region: this.region,
        phoneNumber: this.phone,
        bingVehicle: this.bingVehicle,
        certStatus: this.certStatus,
        driverName: this.driverName,
        fleetId:this.fleetId
      };
      ////console.log(params);
      httpApi.driverApi.getAuditedDriverList(params).then((res) => {
        ////console.log("已认证司机列表", res);
        this.records = res.data.data.records;

        res.data.data.records.forEach(item => {
          let d = item.todayTimes
          d = parseInt(d / 1000)
          //console.log(d)
          // 计算出相差的秒部分，去除相差的数字中含有的60(分钟)
          let second = d % 60
          // 计算出相差的分钟，去除相差的数字中含有的小时(3600),单位换算为分钟
          let minute = parseInt(d % 3600 / 60)
          // 计算出相差的小时，去除相差的数字中含有的天(24*3600)，单位换算为小时
          let hour = parseInt(d % (24 * 3600) / 3600)

          let d2 = item.allTimes
          d2 = parseInt(d2 / 1000)
          let second2 = d2 % 60
          let minute2 = parseInt(d2 % 3600 / 60)
          let hour2 = parseInt(d2 % (24 * 3600) / 3600)
          let day = parseInt(d2 / (24 * 3600))
          item.allTimes = `${day != 0 ? day + '天' : ''}${hour2 != 0 ? hour2 + '小时' : ''}${minute2}分钟`
          // //console.log(`${hour<10?'0'+hour:hour}:${minute<10?'0'+minute:minute}:${second<10?'0'+second:second}`)
          // :${second<10?'0'+second:second}
          item.todayTimes = `${hour != 0 ? hour + '小时' : ''}${minute}分钟`
        })

        ////console.log("1111", this.records);
        this.data = res.data.data;
      });
    },
    init() {
      this.getDriverList();
      this.searchList();
      this.SearchFleetList();
    },
    // 查询车队
    SearchFleetList(query) {
      let params = {
        fleetName: query,
      };
      httpApi.driverApi.getFleetList(params).then((res) => {
        if (res.data.code == 200) {
          this.FleetList = res.data.data.records;
        }
      });
    },
    searchList() {
      let params = {
        numberplate: this.vehicle.carNumber,
        current: this.vehicle.pageCurrent,
        size: this.vehicle.pageSize,
      };
      ////console.log("参数", params);
      httpApi.driverApi.getvehicleList(params).then((res) => {
        ////console.log("查询结果", res);
        this.records2 = res.data.data.records;
        // this.data = res.data.data;
        // this.records2.map((item) => {
        // item.radio = false;
        // if (isJSON(item.specification)) {
        //   let specification = JSON.parse(item.specification);
        //   ////console.log(
        //     specification.modelType ? specification.modelType : "111"
        //   );
        //   let str =
        //     specification.energyType +
        //     (specification.highRoof ? "/" : "") +
        //     specification.highRoof +
        //     (specification.structureType ? "/" : "") +
        //     specification.structureType +
        //     (specification.modelType ? "/" : "") +
        //     (specification.modelType
        //       ? specification.modelType.split(",").join("-")
        //       : specification.modelType);
        //   item.specificationStr = str;
        // }
        // });
      });
    },
    // 清空
    CleanUp2() {
      this.vehicle.carNumber = "";
      this.stateSelected = "";
      this.searchList(1);
    },
    showBindVehicle(id) {
      this.selectDriverId = id;
      this.dialogVehicle = true;
    },
    handleChange(val) {
      ////console.log(val.length);
      if (val.length != 0) {
        this.citySelected = val;
        var labelArr = this.$refs.sysCascader.getCheckedNodes()[0].pathLabels;
        ////console.log(labelArr);
        this.citySelectedLabel = labelArr.join("/");
        ////console.log(this.citySelectedLabel);
      }
    },
    clearUp() {
      this.driverName = "";
      this.citySelected = "";
      this.citySelectedLabel = "";
      this.bingVehicle = "";
      this.phone = "";
      this.certStatus = "";
      this.getDriverList(1);
    },
    changePages(val) {
      ////console.log("页", val);
      this.pageCurrent = val;
      this.getDriverList();
    },
    // 邀请司机
    addDriver() {
      this.dialogDriver = true;
      this.addForm = {
        Fleet: "",
        driverPhone: "",
      };
    },
    // 点击邀请
    addDriverSubmit() {
      let params = {
        fleetId: this.addForm.Fleet,
        phoneNumber: this.addForm.driverPhone,
      };
      httpApi.driverApi.addDriver(params).then((res) => {
        if (res.data.code == 200) {
          this.$message({
            message: "邀请成功",
            type: "success",
          });
        } else {
          this.$message({
            message: res.data.msg,
            type: "error",
          });
        }
        this.addForm = {
          Fleet: "",
          driverPhone: "",
        };
      });
      this.dialogDriver = false;
    },
    // 选择车辆
    handleCurrentChange(row) {
      this.selectCode = row.vehicleId;
      let list = this.records2.filter(
        (item) => item.vehicleId === row.vehicleId
      );
      this.checkObj = list[0];
      ////console.log("选中的单行数据：", this.checkObj);
    },
    // 点击确定
    select() {
      let params = {
        driverId: this.selectDriverId,
        vehicleId: this.checkObj.vehicleId,
      };
      httpApi.driverApi.ChooseVehicle(params).then((res) => {
        if (res.data.code == 200) {
          this.$message({
            message: "绑定车辆成功",
            type: "success",
          });
          this.init();
        } else {
          this.$message({
            message: res.data.msg,
            type: "error",
          });
        }
        this.selectCode = "";
        this.checkObj = "";
        this.dialogVehicle = false;
      });
    },
  },
  mounted() {
    this.init();
    this.newCity = newCity; //存储中国三级省市数据
    // this.getSerialNumber();
    this.getProjectNameOptions()
  },
  components: {
    breadcrumb,
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-dialog .el-dialog__body .driverList {
  display: flex;
  flex-direction: column;
  align-items: center;
}

::v-deep .el-dialog .el-dialog__body .inputItem {
  display: flex;
  align-items: center;
  margin-right: 23px;

  >.title {
    color: #262626;
    font-size: 12px;
    margin-right: 7px;
  }

  >.inputBox {
    width: 160px;
    margin-right: 7px;

    .el-input__inner {
      height: 32px;
      font-size: 12px;
    }

    ::v-deep .el-input__inner::placeholder {
      color: #c3c3c3;
      font-size: 12px;
    }
  }
}

.control {
  height: 76px;
  display: flex;
  width: 100%;
  background-color: #fff;
  flex-wrap: wrap;
  align-items: center;
  padding: 20px 29px;
  margin-bottom: 8px;

  .inputItem {
    display: flex;
    align-items: center;
    margin-right: 23px;
    margin-bottom: 10px;

    >.title {
      color: #262626;
      font-size: 12px;
      margin-right: 7px;
    }

    >.inputBox {
      width: 160px;

      ::v-deep .el-input__icon {
        line-height: 0;
      }

      ::v-deep .el-input__inner {
        height: 32px;
        font-size: 12px;
      }

      ::v-deep .el-input__inner::placeholder {
        color: #c3c3c3;
        font-size: 12px;
      }
    }
  }
}

.main {
  width: 100%;
  height: calc(100vh - 211px);
  background-color: #fff;
  padding: 24px 30px 0 30px;

  .addBtn {
    text-align: right;
    margin-bottom: 16px;
  }

  .list {
    height: calc(100% - 49px);

    // 表头样式
    ::v-deep .el-table__body-wrapper {
      height: calc(100vh - 332px) !important;
      overflow-y: scroll;
    }

    ::v-deep .el-table__header th {
      background-color: #f0f6fd;
      color: #262626;
      font-size: 12px;
      font-weight: bold;
      text-align: center;

      // 表 body的td
      ::v-deep .el-table__body td {
        color: #595959;
        font-size: 12px;
      }
    }

    .stateBtns {
      height: 30px;
      width: 76px;

      ::v-deep .el-button {
        height: 30px;
        width: 76px;
        font-size: 12px;
        border: none;
        display: flex;
        align-items: center;
        justify-content: center;
        line-height: 30px;
      }

      .Pass {
        background-color: #ecf5fe;
        color: #1890ff;
      }
    }
  }

  .paginationBox {
    width: 100%;
    background-color: #fff;
    display: flex;
    height: 48px;
    align-items: center;

    .pagination {
      margin-left: auto;
    }
  }
}
</style>

<style lang="scss">
.zdy_dialog_driverListDetail {
  height: 100vh;
  margin: 0 !important;
  position: fixed;
  right: 0;
  min-width: 500px;
  overflow-y: scroll;

  .dialog_header {
    display: flex;

    >.icon-dairenzhengsiji {
      font-size: 43px;
      color: #1890ff;
    }

    .infoBox {
      margin-left: 13px;

      >.info {
        display: flex;
        margin-bottom: 7px;
        align-items: center;

        >.name {
          color: #262626;
          font-size: 18px;
          margin-right: 8px;
        }

        .tagAudit {
          background-color: #ecf5fe;
          font-size: 10px;
          color: #1890ff;
          padding: 5px 8px 4px;
          border-radius: 4px;
          display: inline-block;
          margin-right: 6px;
        }

        >.gender {
          background-color: #ecf5fe;
          font-size: 10px;
          color: #1890ff;
          border-radius: 4px;
          padding: 4px 7px 3px;
          display: inline-block;
        }
      }

      .text {
        display: flex;
        color: #939393;
        font-size: 12px;

        .afterLine::after {
          content: "|";
          color: #939393;
          margin-left: 11px;
          margin-right: 12px;
        }
      }
    }
  }

  .dialog_body {
    >.title {
      height: 60px;
      display: flex;
      align-items: center;

      >.icon-xinxi {
        font-size: 16px;
        margin-right: 7px;
      }

      >h3 {
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: #262626;
      }

      .center_line {
        flex: 1;
        height: 1px;
        background-color: #f0f0f0;
        margin-left: 14px;
      }
    }

    .picBox {
      display: flex;
      width: 400px;
      overflow-x: scroll;

      .pic_item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin-right: 32px;

        .pic {
          width: 109px;
          height: 71px;
        }

        >span {
          color: #666666;
          font-size: 12px;
        }
      }
    }
  }
}
</style>
